memo API (React 19)

memo는 성능 최적화를 위해 특정 연산 또는 UI 조각만 메모이제이션하는 기능을 제공합니다. 기존의 React.memo와는 다른 점이 몇 가지 있습니다.

💡 주요 특징

• 컴포넌트 내부에서 사용 가능: React.memo는 컴포넌트 전체를 감싸야 했지만, memo는 컴포넌트 내부에서도 사용할 수 있습니다.
• 부분적인 메모이제이션 가능: 특정 연산 결과나 UI 조각을 캐싱하여 성능 최적화합니다.
• 렌더링 최적화: 불필요한 재계산을 방지하여 성능 향상시킵니다.
• useMemo보다 간결한 사용법 제공: 더 직관적으로 사용할 수 있습니다.

---

1️⃣ useMemo 와 memo API의 차이점

🔹 기존 방식 (useMemo 사용)

useMemo를 사용하여 특정 값이나 계산된 결과를 메모이제이션합니다. 그러나 useMemo는 컴포넌트가 리렌더링 될 때마다 실행됩니다.

import { useMemo } from "react";

function MyComponent({ count }) {
  const computedValue = useMemo(() => {
    console.log('Expensive computation running...');
    return count * 2;
  }, [count]);

  return <div>Computed Value: {computedValue}</div>;
}

✔️ useMemo를 사용하여 특정 연산을 메모이제이션
❗ 컴포넌트가 리렌더링 될 때마다 useMemo의 콜백 함수가 실행됩니다.

🔹 memo API 사용 방식 (React 19)

memo는 특정 연산을 메모이제이션하여 불필요한 계산을 방지합니다. memo는 컴포넌트 내부에서 사용 가능하며, 렌더링될 때마다 계산이 실행되지 않습니다.

import { memo } from 'react';

function MyComponent({ count }) {
  const computedValue = memo(() => {
    console.log('Expensive computation running...');
    return count * 2;
  }, [count]);

  return <div>Computed Value: {computedValue}</div>;
}

✔️ 의존성 배열 ([count])이 변경될 때만 계산이 실행되고, 리렌더링이 발생해도 불필요한 연산이 실행되지 않습니다. ❗ memo는 주로 계산된 값만 메모이제이션하기 때문에, 복잡한 UI 업데이트에는 다른 방법을 고려해야 할 수 있습니다.

3️⃣ React.memo와의 차이점

구분	React.memo (기존)	memo (React 19)
적용 범위	전체 컴포넌트 메모이제이션	특정 연산 또는 UI 조각 메모이제이션
사용 위치	컴포넌트 정의 외부에서 사용	컴포넌트 내부에서도 사용 가능
컴포넌트 외부에서 사용	React.memo로 컴포넌트 전체를 감싸야 함	컴포넌트 내부에서도 특정 연산을 메모이제이션 가능